Hi Nitin, nice work! The landscape picker looks much better already!

Just a few style tweaks as promised in gitter 😄 :

(1) The date selector overlaps the current selection:

In general the vertical spacing looks a bit tight, so increasing that slightly will probably fix this overlap issue too.

(2) The days should be vertically aligned with the dates:

This left margin may be the issue:

(3) There needs to be some margin around the calendar, at least on the sides and bottom, and 8px between the buttons:

(4) If we're aiming to follow the spec, it looks like the buttons have a smaller min-width. (Note how the OK button is narrower, even with the extra margin in the MD spec):

That may be a fault with our button component, but for now you could override it for the calendar.

(5) In 0.15.0-alpha.2, the calendar used to have an animated transition when changing month, similar to:

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsSm5KN1FNQXRFRDA/components_pickers_date_navigation_xhdpi_004.webm

Also in that video, you'll notice the calendar maintains it's height when the number of weeks changes. Currently ours jumps p and down in height. This also affects the year selector.

(6) The hover state for the year selector in the redesigned picker should be different to the selected year:

Google don't give any hints here, but it should probably be an intermediate state, not the same as the selected year - smaller size than selected, and the lighter green color. IT should probably transition between states.

(7) The font size for the unselected years is too small.

Redesigned picker:

Spec:

8. There's a min-height missing somewhere in the portrait picker:

Expect more to follow, but that should keep you busy for a little while 😄

Need to check this for #1489.

@mbrookes : Alright. Will do.

@mbrookes : Suggestions have been implemented. Looking forward to your suggestions. As far as #1489 is concerned there is an issue with months with 6 rows in them (in Safari) let me see what I can do about it.

• The date selector overlaps the current selection:
• The days should be vertically aligned with the dates:
• There needs to be some margin around the calendar, at least on the sides and bottom, and 8px between the buttons:
• If we're aiming to follow the spec, it looks like the buttons have a smaller min-width. (Note how the OK button is narrower, even with the extra margin in the MD spec):
• In 0.15.0-alpha.2, the calendar used to have an animated transition when changing month.
• The hover state for the year selector in the redesigned picker should be different to the selected
• The font size for the unselected years is too small.
• There's a min-height missing somewhere in the portrait picker
• The year list be laid out with fixed spacing so it doesn't reposition later years on font size change of earlier ones

@mbrookes: Just added these for you to uncheck if you feel it needs more work. 😀

@mbrookes : This should resolve #1489

@tintin1343 - getting there! 👍

I've unchecked the ones that don't appear to have been addressed yet.

Also:

The hover state for the year selector in the redesigned picker should be different to the selected

It's better, I don't think the currently selected year should shrink when hovered, also could the list be laid out with fixed spacing so it doesn't reposition later years on font size change of earlier ones?

• The date selector overlaps the current selection:
• The days should be vertically aligned with the dates:
• There needs to be some margin around the calendar, at least on the sides and bottom, and 8px between the buttons:
• If we're aiming to follow the spec, it looks like the buttons have a smaller min-width. (Note how the OK button is narrower, even with the extra margin in the MD spec):
• In 0.15.0-alpha.2, the calendar used to have an animated transition when changing month.
• The hover state for the year selector in the redesigned picker should be different to the selected
• The font size for the unselected years is too small.
• There's a min-height missing somewhere in the portrait picker
• The year list be laid out with fixed spacing so it doesn't reposition later years on font size change of earlier ones
• On safari the datepicker doesn't display the last row correctly #1489
• [Datepicker] Error change month button in Firefox mui-x#7515

@mbrookes : Please check again. I made the changes you mentioned where not fixed.

Hi Nitin, getting there. A few more tweaks as mentioned:

1. The days should be vertically aligned with the dates:
   
   (Also, they appear to be using floats rather than flex, could you fix that?)

2. Button padding should follow MD guidlines:

(8px above, below and to the right). Same for the Year selector.

3. Also from the spec above, 24px from the bottom of the last row of numbers to the top of the buttons (it's too large at the moment).

4. Dialog button minWidth should be 64px (including text padding):

5. Year selector font sizes for both selected and unselected are still too small, and the vertical spacing too large:

6. Dialog changes size between month and year selectors:

(might be related to the lack of padding below the buttons.)

7. The years in the year selector are off center again (see image above).

8. This is still happening:

(But maybe you just hadn't pushed that change.)

All that said, I'm assuming the internal structure is reasonable, but I'll let one of the others comment.

Thanks @mbrookes! Those are some amazing observations.

I will work on em right away.

@mbrookes: Updated the changes:

• The days should be vertically aligned with the dates:
• Button padding should follow MD guidlines:
• Also from the spec above, 24px from the bottom of the last row of numbers to the top of the buttons (it's too large at the moment).
• Dialog button minWidth should be 64px (including text padding):
• Year selector font sizes for both selected and unselected are still too small, and the vertical spacing too large:
• Dialog changes size between month and year selectors:
• The years in the year selector are off center again (see image above).
• Height Issue.

I am not able to reproduce the last one. Can you help me with it?

Last few issues outstanding.

1. Month animation direction is reversed.

1. Still no button margin:

And the buttons look too tall. Check the spec again (layout and visual).

1. Also from the spec above, 24px from the bottom of the last row of numbers to the top of the button margin (it's too large at the moment).

Still appears to be about 78px:

Only if you wanted to try, it would be pretty cool if when you click in a year, it animates to adopt the selected year position, and size.

Letters are cut off here due to the overflow being hidden:

These buttons need to be minWidth: 64

Letters are cut off here due to the overflow being hidden:

@nathanmarks : which browser? Looks fine in chrome, Safari and firefox

These buttons need to be minWidth: 64

They do have.

  },
      flatButtons: {
        fontsize: 14,
        margin: '4px 8px 8px 0px',
        maxHeight: 36,
-->    minWidth: 64,
        padding: 0,
      },

The CalendarActionButtons.js file has this.

@tintin1343 I was on the wrong PR 😄

@nathanmarks U scared me man. :p

@tintin1343 hahaah

I think we should force the month onto the 2nd line here, under all circumstances:

usually it is like

@nathanmarks : I agree. Let me fix that.

@mbrookes : Fixed the issues that we discussed.